<template>
  <div class="theme_color" :class="isDark?'theme_dark':'theme_light'">
    <div class="layout" :class="{'layout-hide-text': layoutInfo.spanLeft < 3}">
      <Row type="flex" style="height: 100%;">
        <i-col :span="layoutInfo.spanLeft" class="layout-menu-left">
          <div class="layout-logo-left">
            <img :src="layoutInfo.logoSrc" alt="">
          </div>
          <Menu :class="isDark?'theme_dark':'theme_light'" :active-name="menuUrl" @on-select="selectMenu" @on-open-change="spreadLeftMenu" theme="dark" width="auto" :open-names="optionNames">
            <div class="menu_box" v-for="(item,index) in menuList" :key="index">
              <Menu-item :name="item.menuUrl" v-if="item.children && !item.children.length">
                <Tooltip class="layout-tooltip" :content="item.menuName" placement="right" v-if="layoutInfo.spanLeft < 3">
                  <Icon :type="item.icon" :size="layoutInfo.iconSize" />
                </Tooltip>
                <Icon class="layout-icon" :type="item.icon" :size="layoutInfo.iconSize" />
                <span class="layout-text" v-text="item.menuName"></span>
              </Menu-item>
              <Submenu :name="item.menuUrl" v-if="item.children && item.children.length">
                <template slot="title">
                  <Tooltip class="layout-tooltip" :content="item.menuName" placement="right" v-if="layoutInfo.spanLeft < 3">
                    <Icon :type="item.icon" :size="layoutInfo.iconSize" />
                  </Tooltip>
                  <Icon class="layout-icon" :type="item.icon" :size="layoutInfo.iconSize" />
                  <span class="layout-text" v-text="item.menuName"></span>
                </template>
                <Menu-item
                  :name="i.menuUrl"
                  v-show="!(layoutInfo.spanLeft < 3)"
                  v-for="(i,n) in item.children"
                  :key="n">
                  <Icon :type="i.icon" :size="layoutInfo.iconSize" />
                  <span class="layout-text" v-text="i.menuName"></span>
                </Menu-item>
              </Submenu>
            </div>
          </Menu>
        </i-col>
        <i-col :span="layoutInfo.spanRight" class="layout-main-right">
          <div class="layout-header">
            <div style="display: flex;align-items: center">
              <div class="toLeft head_box">
                <button @click="toggleClick">
                  <span class="iconfont icon-icon-shouqi" style="font-size: 24px;color: #666;"></span>
                </button>
              </div>
              <div class="refresh head_box">
                <Icon @click="reload" type="md-refresh" size="20" />
              </div>
              <div class="layout-breadcrumb head_box">
                <Breadcrumb>
                  <Breadcrumb-item
                    v-for="(item,index) in breadcrumbList"
                    :key="index"
                    :href="index>=breadcrumbList.length-1?item.menuUrl:''">
                    <span>{{item.title}}</span>
                  </Breadcrumb-item>
                </Breadcrumb>
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <Tooltip class="layout-tooltip" :content="isFullscreen?'退出全屏':'全屏'" placement="bottom">
                <div class="screenFull">
                  <Icon @keyup.esc.native="isFullscreen=false" @click="handleFullScreen" :type="isFullscreen?'md-contract':'md-expand'" size="20" />
                </div>
              </Tooltip>
              <el-popover
                placement="bottom"
                width="240"
                trigger="hover">
                <div class="message_box" v-if="messageList && messageList.length>0">
                  <ul>
                    <li
                      v-for="(item,index) in messageList"
                      :key="index"
                      @click="selectMenu(item.path)">
                      <span class="iconfont" :class="item.icon"></span>
                      <span class="text">{{item.title}}</span>
                    </li>
                  </ul>
                </div>
                <div class="message_box" v-if="messageList.length<=0">
                  <p class="tip">暂无任何消息...</p>
                </div>
                <div class="message head_box" slot="reference">
                  <Badge :dot="messageList && messageList.length>0">
                    <span class="iconfont icon-icon-tongzhi"></span>
                  </Badge>
                </div>
              </el-popover>
              <el-popover
                placement="bottom"
                width="90"
                trigger="hover">
                <div class="user_box" >
                  <ul>
                    <li
                      v-for="(item,index) in userBoxList"
                      :key="index"
                      @click="selectMenu(item.path)">
                      <Icon :type="item.icon" size="20" />
                      <span>{{item.title}}</span>
                    </li>
                  </ul>
                </div>
                <div class="user head_box" slot="reference">
                  <img v-if="headerPic" :src="headerPic" alt="用户头像">
                  <span v-if="!headerPic" class="iconfont icon-icon-zhanghao"></span>
                </div>
              </el-popover>
            </div>
          </div>
          <div class="layout-nav-tags">
            <navTags :routerList="navTags" @deleteNavTag="deleteNavTag" @clearNavTag="clearNavTag" @selectMenu="selectMenu" />
          </div>
          <div class="layout-content">
            <div class="layout-content-main">
              <!--            内容区域-->
              <router-view />
            </div>
          </div>
          <div class="layout-copy">
            2022 07 12 &copy; Founding Date
          </div>
        </i-col>
      </Row>
      <aside>
        <customerService />
        <hello_user />
        <setting_theme :isDark="isDark" @changeThemeColor="changeThemeColor" />
      </aside>
    </div>
  </div>
</template>
<script>
  import screenFull from 'screenfull'
  import navTags from '../../components/navTags.vue'
  import menuList from '../../apiData/menu.js'
  import totalMenuList from '../../apiData/totalMenu.js'
  import customerService from '../../components/customerService/customerService.vue'
  import hello_user from '../../components/hello_user.vue'
  import setting_theme from '../../components/theme_colors.vue'
  export default {
    data () {
      return {
        isDark: false,  // 主题颜色
        totalMenuList: [],  // 所有menu列表
        layoutInfo: {
          spanLeft: 3,
          spanRight: 21,
          iconSize: 14,
          logoSrc: require('../../assets/logo/logo2.png')
        },
        menuList: [],  // 完整目录
        menuUrl: '/dashboard',  // 记录跳转路径
        optionNames: [],  // 默认展开的子目录
        breadcrumbList: [],  // 面包屑
        isFullscreen: false, //是否全屏
        messageList: [
          { icon: 'icon-icon-gonggao', title: '您有5个待发货的订单', path: '/order1' },
          { icon: 'icon-jinggao', title: '您有1个商品库存预警', path: '/order1' },
          { icon: 'icon-icon-gonggao', title: '您有8个提现申请待处理', path: '/order1' },
          { icon: 'icon-icon-gonggao', title: '您有10个评论待回复', path: '/order1' },
        ],
        headerPic: '',  // 用户头像
        userBoxList: [
          { icon: 'ios-person-outline', title: '个人中心', path: '/userCenter' },
          { icon: 'ios-exit-outline', title: '退出登录', path: '' }
        ],
        navTags: [  // 右侧nav条储存
          { title: '首页', path: '/dashboard' }
        ]
      }
    },
    components: {
      navTags,  // 右侧nav滚动条
      customerService,
      hello_user,
      setting_theme  // 主题设置
    },
    watch: {
      $route:{
        handler(val){
          let path = val.path;
          this.menuUrl = path;
          let paths = [];
          if(val.matched && val.matched.length) {
            val.matched.forEach(item => {
              paths.push({
                title: item.meta.title,
                menuUrl: item.path
              })
            })
          }
          this.breadcrumbList = paths
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.getNavTags();
      this.getData();
      this.getUserData();
    },
    methods: {
      // 子组件调用
      changeThemeColor(isDark) {
        this.isDark = isDark;
        localStorage.setItem('themeColor', JSON.stringify(isDark));
      },
      // 获取localStage有没有navTagsList
      getNavTags() {
        let navTagsList = JSON.parse(localStorage.getItem('navTagsList'));
        if(navTagsList && navTagsList.length) {
          this.navTags = navTagsList
        }
      },
      // 获取menu数据
      getData() {
        this.menuList = menuList;
        this.totalMenuList = totalMenuList;
        let cd = [];
        this.menuList.forEach(item => {
          if(item.children && item.children.length) {
            cd.push(item.menuUrl);
          }
        });
        this.optionNames = cd;
      },
      // 获取用户信息
      getUserData() {
        this.$store.dispatch('GetInfo').then(res => {
          if(res.status) {
            this.headerPic = res.data.headerPic
          }
        })
      },
      // 左侧目录收起和展开
      toggleClick () {
        if (this.layoutInfo.spanLeft === 3) {
          this.layoutInfo.spanLeft = 1;
          this.layoutInfo.spanRight = 23;
          this.layoutInfo.iconSize = 24;
          this.layoutInfo.logoSrc = require('../../assets/logo/logo.png')
        } else {
          this.layoutInfo.spanLeft = 3;
          this.layoutInfo.spanRight = 21;
          this.layoutInfo.iconSize = 14;
          this.layoutInfo.logoSrc = require('../../assets/logo/logo2.png')
        }
      },
      // 点击目录跳转
      selectMenu(path) {
        if(path) {
          if(this.menuUrl !== path) {
            this.$router.push({
              path: path
            })
          }
          this.addNavTags(path);
        }else{
          this.$Cookie.remove('et-token');
          localStorage.clear();
          this.$router.push({
            path: '/login'
          })
        }
      },
      // 添加tag
      addNavTags(path) {
        // 先找navTags有没有当前点击的nav，没有则添加，有则不操作
        let routes = this.navTags.filter(item => item.path===path);
        if(routes && routes.length) {
          // this.$Message.info('含有当前目录： '+path)
        }else{
          let nav = this.totalMenuList.filter(item => item.path===path)[0];
          this.navTags.push(nav);
          localStorage.setItem('navTagsList',JSON.stringify(this.navTags))  // 将看过的menu存储到localStorage中
        }
      },
      // 删除tag
      deleteNavTag(tag) {
        this.navTags.splice(this.navTags.indexOf(tag), 1);
        localStorage.setItem('navTagsList',JSON.stringify(this.navTags));
        // 删除一个tag后会找到当前nacTags数组最后一个tag并跳转，无论删除第几个都无影响
        let route = this.navTags[this.navTags.length-1];
        this.selectMenu(route.path);
      },
      // 清除tags
      clearNavTag(type, path) {
        if(type === 'all') {
          this.navTags = [];
          this.navTags = [ { title: '首页', path: '/dashboard' } ];
          localStorage.setItem('navTagsList',JSON.stringify(this.navTags));
          // 删除一个tag后会找到当前nacTags数组最后一个tag并跳转，无论删除第几个都无影响
          let route = this.navTags[this.navTags.length-1];
          this.selectMenu(route.path);
        }else{
          let tempNavTags = [ { title: '首页', path: '/dashboard' } ];
          if(path !== '/dashboard') {
            this.navTags.forEach(tag => {
              if(tag.path === path) {
                tempNavTags.push(tag)
              }
            });
          }
          this.navTags = [];
          this.navTags = tempNavTags;
          localStorage.setItem('navTagsList',JSON.stringify(this.navTags));
          // 删除一个tag后会找到当前nacTags数组最后一个tag并跳转，无论删除第几个都无影响
          let route = this.navTags[this.navTags.length-1];
          this.selectMenu(route.path);
        }
      },
      spreadLeftMenu() {
        if (this.layoutInfo.spanLeft !== 3) {
          this.layoutInfo.spanLeft = 3;
          this.layoutInfo.spanRight = 21;
          this.layoutInfo.iconSize = 14;
          this.layoutInfo.logoSrc = require('../../assets/logo/logo2.png')
        }
      },
      // 刷新按钮
      reload() {
        // location.reload();
        self.location.reload();
      },
      // 全屏按钮
      handleFullScreen() {
        console.log(screenFull.isEnabled)
        if (!screenFull.isEnabled) {
          this.$Message.error('您的浏览器版本过低，不支持全屏浏览');
          return false;
        }else{
          this.isFullscreen = !this.isFullscreen;
          screenFull.toggle();
        }
      },

    }
  }
</script>
<style lang="scss" scoped>
  .layout{
    height: 100vh;
    position: relative;
    overflow: hidden;
    .layout-menu-left{
      .layout-logo-left{
        width: 100%;
        height: 60px;
        border-radius: 3px;
        margin: 0 auto;
        padding: 5px 0;
        overflow: hidden;
        img{
          height: 100%;
        }
      }
    }
    .layout-main-right{
      .layout-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        padding: 0 10px;
        .head_box{
          margin: 0 10px;
        }
        .toLeft{
          button{
            border: none;
            cursor: pointer;
          }
        }
        .refresh,
        .screenFull{
          cursor: pointer;
          padding-bottom: 3px;
        }
        .message{
          cursor: pointer;
          span{
            font-size: 18px;
            font-weight: bold;
          }
        }
        .user{
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;
          img{
            max-width: 100%;
            max-height: 100%;
          }
          span{
            display: inline-block;
            border: 1px solid #aaa;
            width: 24px;
            height: 24px;
            line-height: 22px;
            text-align: center;
            border-radius: 50%;
            font-size: 16px;
            color: #999;
          }
        }
      }
      .layout-nav-tags{
        height: 36px;
      }
      .layout-content{
        height: calc(100vh - 60px - 32px - 60px);  // 这里多减去60px 目的为了将copy显示出来
        overflow-y: scroll;
        .layout-content-main{

        }
      }
      .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
      }
    }
  }
  .layout-hide-text{
    .layout-icon,
    .layout-text{
      display: none;
    }
    .layout-logo-left{
      text-align: center;
    }
    /deep/ .ivu-menu-item{
      padding: 14px 0;
      text-align: center;
    }
    /deep/ .ivu-menu-submenu{
      .ivu-menu-submenu-title{
        text-align: center;
        padding: 14px 0;
        .ivu-menu-submenu-title-icon{
          display: none;
        }
      }
    }
  }
  .ivu-col{
    transition: width .2s ease-in-out;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    /*height:300px;*/
  }
  .showBox{
    height: 100px;
    background: #000;
    width: 100px;
    position: fixed;
    top: 60px;
    right: 20px;
  }
</style>
<style lang="scss" scoped>
  /deep/ .ivu-menu.theme_light{
    background: #001529 !important;
    /*background: #242525 !important;*/
    .ivu-menu-item-active,
    .ivu-menu-opened,
    .ivu-menu-submenu-title,
    .ivu-menu-item:hover,
    .ivu-menu-item-active:hover{
      background: #001529 !important;
      /*background: #242525 !important;*/
    }
  }
  /deep/ .ivu-menu.theme_dark{
    background: #242525 !important;
    .ivu-menu-item-active,
    .ivu-menu-opened,
    .ivu-menu-submenu-title,
    .ivu-menu-item:hover,
    .ivu-menu-item-active:hover{
      background: #242525 !important;
    }
  }
  /deep/ .ivu-menu{
    .ivu-menu-item-active{
      color: #2d8cf0 !important;
    }
  }
  .message_box{
    ul{
      li{
        cursor: pointer;
        line-height: 30px;
        padding: 5px 6px;
        border-radius: 3px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        span.iconfont{
          display: inline-block;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          text-align: center;
          font-size: 20px;
          color: #fff;
        }
        span.icon-icon-gonggao{
          background: #87d068;
        }
        span.icon-jinggao{
          background: #fe5c57;
        }
        span.text{
          margin-left: 6px;
        }
      }
      li:last-child{
        border-bottom: none;
      }
      li:hover{
        background: #f5f5f5;
      }
    }
    p.tip{
      color: #aaa;
      line-height: 40px;
    }
  }
  .user_box{
    ul{
      li{
        cursor: pointer;
        line-height: 30px;
        padding: 0 6px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        span{
          margin-left: 4px;
        }
      }
      li:hover{
        background: #f5f5f5;
      }
    }
  }
</style>
